<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绝对定位</title>
	<style type="text/css">
		body{
			background-color: #ccc;
		}
		img{
			width: 150px;
			height: 150px;
			border: 10px solid white;
			margin-left: 20px;
			display: block;
		}
		.box1{
			width: 780px;
			height: 170px;
			border: 1px red solid;
			margin: 0 auto;
		}
		.box2{
			float: left;
			position: relative;
			
		}
		.txt{
			width:150px;
			background-color: rgba(0,0,0,0.5);
			position: absolute;
			bottom: 10px;
			left: 30px;
			text-align: center;
			display: none;
		}
		.box2:hover .txt{
			display: block;
		}
	</style>
</head>
<body>
	<div class="box1">
		<div class="box2">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536899431966&di=74df857685085634a5933599a3f857e1&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2018%2F04%2F2410310013230.jpg">
			<div class="txt">喵喵喵</div>
		</div>
		<div class="box2">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536899431966&di=74df857685085634a5933599a3f857e1&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2018%2F04%2F2410310013230.jpg">
			<div class="txt">喵喵喵</div>
		</div>
		<div class="box2">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536899431966&di=74df857685085634a5933599a3f857e1&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2018%2F04%2F2410310013230.jpg">
			<div class="txt">喵喵喵</div>
		</div>
		<div class="box2">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536899431966&di=74df857685085634a5933599a3f857e1&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2018%2F04%2F2410310013230.jpg">
			<div class="txt">喵喵喵</div>
		</div>
	</div>
</body>
</html>